<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="props.id ? '编辑咨询登记' : '新增咨询登记'" width="500" :before-close="handleClose">
      <span>
        <!-- 表单 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
          status-icon>
          <el-form-item label="老人姓名：">
            <el-button @click="select">{{ ruleForm.customerName ? ruleForm.customerName : "选择老人" }}</el-button>
          </el-form-item>
          <el-form-item label="咨询类型：" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择" clearable>
              <el-option v-for="item in typeList" :label=item :value=item />
            </el-select>
          </el-form-item>
          <el-form-item label="咨询渠道：" prop="source">
            <el-radio-group v-model="ruleForm.source">
              <el-radio value="来访登记">来访登记</el-radio>
              <el-radio value="电话">电话</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="咨询人：" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入咨询人" clearable />
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input v-model="ruleForm.mobile" placeholder="请输入联系电话" clearable />
          </el-form-item>
          <el-form-item label="与老人关系：" prop="relation">
            <el-select v-model="ruleForm.relation" placeholder="请选择与老人关系" clearable>
              <el-option v-for="item in relationList" :label=item :value=item />
            </el-select>
          </el-form-item>
          <el-form-item label="策划回访日期：" prop="visitTime">
            <el-date-picker v-model="ruleForm.visitTime" type="date" value-format="YYYY-MM-DD HH:mm" placeholder="请选择"
              style="width: 100%" />
          </el-form-item>
          <el-form-item label="咨询内容：" prop="content">
            <el-input v-model="ruleForm.content" type="textarea" placeholder="请输入咨询内容" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <selectElderly v-if="elderlyDialogVisible" @close="closeHandle"></selectElderly>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, onMounted } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { AddParams } from '../../../api/market/question/type'
import selectElderly from '../../../components/market/elderly/selectElderly.vue'
import { addQuestion, getQuestionModel, updateQuestion } from '@/api/market/question/question';



const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['close'])

//dialog默认显示
const dialogVisible = ref(true)

//选择老人dialog
const elderlyDialogVisible = ref(false)

//咨询类型
const typeList = reactive<string[]>(["线上咨询", "线下咨询"])
//关系
const relationList = reactive(["父子关系", "父女关系", "母子关系", "母女关系", "其他"])

//添加咨询登记
const ruleForm = reactive<AddParams>({
  customerId: 0,
  type: "",
  source: "",
  name: "",
  customerName: "",
  mobile: "",
  relation: "",
  visitTime: "",
  content: ""
})

const props = defineProps({
  id: Number
})

// console.log("props", props.id);

//获取单条信息
const getQuestionDetail = async (id: number) => {
  let res = await getQuestionModel(id)
  if (res) {
    Object.assign(ruleForm, res);
  }
}

//规则
const rules = reactive<FormRules<AddParams>>({
  type: [
    {
      required: true, message: '请选择咨询类型', trigger: 'change',
    },
  ],
  source: [
    {
      required: true, message: '请选择咨询渠道', trigger: 'change',
    },
  ],
  customerName: [
    { required: true, message: '请输入咨询人', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
  ],
  relation: [
    {
      required: true, message: '请选择与老人关系', trigger: 'change',
    },
  ],
  visitTime: [
    {
      required: true, message: '请选择策划回访日期', trigger: 'change',
    },
  ],
  content: [
    { required: true, message: '请输入咨询内容', trigger: 'blur' },
  ],
})

//取消
const handleClose = () => {
  emit('close')
}

//确定
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (props.id) {
        //修改
        let res = await updateQuestion(ruleForm);
      } else {
        //添加
        let res = await addQuestion(ruleForm);
        console.log("add11",ruleForm);
        
      }
      emit('close', true)
    } else {
      ElMessage({
        message: 'error submit!',
        type: 'warning',
      })
    }
  })
}

//选择老人dialog
const select = () => {
  elderlyDialogVisible.value = true;
}

//选择老人dialog
const closeHandle = (data: any) => {
  elderlyDialogVisible.value = false;
  if (data) {
    ruleForm.customerId = data.id;
    ruleForm.customerName = data.name;
  }
  // console.log("close111", data);

}

onMounted(() => {
  if (props.id) {
    getQuestionDetail(props.id)
  }
})

</script>

<style scoped></style>